// 定义全局变量
let isStart = false // 控制游戏是否开始
let score = 0 // 分数
let gameDurationSeconds = 10 // 游戏时常，单位为秒
let timer // 监控游戏时间的定时器

/**
 * 在 DOM 内容加载完成后执行
 */
document.addEventListener('DOMContentLoaded', function() 
{
  // 初始化
  init(score)

  // 为每个苹果绑定点击事件
  const apples = document.querySelectorAll('.apple')
  apples.forEach(apple => {
    apple.addEventListener('click', pickApple)
  })

  // 为开始按钮绑定监听事件
  const btn = document.querySelector('#option-container .start-btn')
  btn.addEventListener('click', start)

  // 开启一个定时器判断时间是否结束
  
})


/**
 * 游戏初始化
 */
function init()
{
  // 初始化全局变量
  isStart = false // 控制游戏是否开始
  score = 0 // 分数
  gameDurationSeconds = 10 // 游戏时常，单位为秒
  clearInterval(timer) // 清除定时器

  // 获取显示分数的span
  const scoreSpan = document.querySelector('#score')
  // 获取显示时间的span
  const timeSpan = document.querySelector("#time")

  if (scoreSpan) {
    // 初始化分数
    scoreSpan.textContent = score
  } else {
    console.error('分数重置失败')
  }

  if (timeSpan) {
    // 初始化时间
    timeSpan.textContent = gameDurationSeconds
  } else {
    console.error('时间重置失败')
  }

  // 让苹果回到初始位置。
  const apples = document.querySelectorAll('.apple');
  apples.forEach(apple => {
    apple.style.transform = ''; // 重置 transform 属性
  });

  // 显示开始按钮
  const btn = document.querySelector('#option-container .start-btn');
  if (btn) {
    btn.style.display = 'block';
  }
}


/**
 * 游戏开始
 */
function start() 
{
  // 初始化分数为 0
  score = 0
  init(score)

  // 隐藏开始按钮
  const btn = document.querySelector('#option-container .start-btn')
  if (btn) {
    btn.style.display = 'none'
  }
  
  // 显示苹果（如果它们之前被隐藏或移除）
  const apples = document.querySelectorAll('.apple')
  apples.forEach(apple => {
    apple.style.display = 'block'
    apple.classList.remove('fall')
    apple.addEventListener('click', pickApple)
  });

  // 游戏开始
  isStart = true

  // 开始定时器
  startTimer()
}

/**
 * 开启定时器记录游戏剩余时间
 */
function startTimer()
{
  let time = gameDurationSeconds

  // 更新剩余时间显示
  updateTimerDisplay(time);

  // 每秒钟执行一次
  timer = setInterval(() => {
    time --
    updateTimerDisplay(time)
    // 时间耗尽
    if (time <= 0) {
      gameover(false) // 游戏结束
    }
  }, 1000)
}


/**
 * 更新剩余时间
 */
function updateTimerDisplay(time)
{
  document.querySelector('#time').textContent = time
}

/**
 * 摘苹果
 * 1. 苹果掉落
 * 2. 分数 +1
 */
function pickApple(event) 
{
  // 游戏未开始
  if (!isStart) {
    return
  }

  // 获取点击的苹果
  const apple = event.target

  // 获取苹果的坐标信息
  const appleRect = apple.getBoundingClientRect()
  // 掉落距离 = 视口高度 - 元素底部边界相对于视口顶部的距离（DOMRect.bottom） - 掉落后元素底部距视口底部的距离
  const distanceToBottom = window.innerHeight - appleRect.bottom
  const dropDistance = distanceToBottom - (0.1 * window.innerHeight * Math.random()) // 添加 Math.random() 后视觉效果更好
  // 添加掉落动画
  apple.style.transform = `translateY(${dropDistance}px)`
  
  // 更新分数
  updateScore()
  
  // 移除点击事件，防止重复点击
  apple.removeEventListener('click', arguments.callee) // arguments.callee 指向当前函数的引用

  // 判断是否摘完所有的苹果
  chickApple()
}

/**
 * 检查苹果是否已经被摘完
 */
function chickApple()
{
  if (score == document.querySelectorAll('.apple').length) {
    gameover(true)
  }
}


/**
 * 得分：分数 +1
 */
function updateScore() 
{
  score += 1;
  document.querySelector('#score').textContent = score
}

/**
 * 游戏结束
 */
function gameover(isWin)
{
  if (isWin) {
    alert(`恭喜你摘完了所有的苹果，你的得分是${score}`)
  } else {
    alert(`时间到~ 你的得分是${document.querySelector('#score').textContent}`)
  }
  // 初始化
  init()
}